<template>

  <div class="title-page">
    <div class="left">
      <span></span>
      <div>{{title}}</div>
    </div>
    <slot v-if='type == "custom"'></slot>
    <div class="right" v-else @click="handleLink">
      <div>{{arrowTitle}}</div>
      <img  src="../img/arrow.png"/>
    </div>
  </div>

</template>
<script lang="ts" setup>
import {defineProps, defineEmits } from "vue";
  const props = defineProps({
    type: {
      type: String,
      default: ""
    },
    title:{
      type: String,
      default: ""
    },
    arrowTitle:{
      type: String,
      default: ""
    }
  })

  const handleLink = async () => {
    emit("handleLink");
  }

  const emit = defineEmits(["handleLink"]);
</script>

<style lang="scss" scoped>
.title-page{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 10px;
  .left{
    display: flex;
    align-items: center;
    span{
      width: 4px;
      height: 12px;
      background: #2A61FF;
    }
    div{
      font-size: 16px;
      font-weight: 600;
      line-height: 24px;
      color: #152C5B;
      margin-left: 12px;
    }
  }

  .right{
    display: flex;
    align-items: center;
    cursor: pointer;
    img{
      width: 5px;
      height: 10px;
    }
    div{
      font-size: 12px;
      font-weight: 500;
      line-height: 20px;
      color: #2A61FF;
      margin-right: 8px;
    }
  }
}


</style>


